<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Text To Speech</title>
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"/>
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="//unpkg.com/element-plus"></script>
  <style>
    .app {
      max-width: 50%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
    }
    .top{
      display: flex;
    }
  </style>
</head>
<body>
<div id="app" class="app">
  <div class="top">
    <el-select @change="changeVoice" v-model="voice" class="m-2" placeholder="选择声音" size="large">
      <el-option
          v-for="item in voices"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>
    <el-input style="margin-left: 10px;max-width: 200px" v-model="lang" disabled placeholder="语言">
      <template #prepend>语言</template>
    </el-input>
  </div>
  <div style="margin-top: 10px;">
    <el-input
        v-model="speakText"
        :rows="2"
        type="textarea"
        placeholder="请输入要说话的文字"
    />
  </div>

  <el-button style="margin: 10px auto;min-width: 200px"  @click="play" type="primary">播放</el-button>
</div>
<script src="text-to-speech.js"></script>
</body>
</html>